<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script src="../lib/qrcode.min.js"></script>
    <script src="../src/watermark.min.js"></script>
</head>
<body>
<h2>同时添加文字和二维码水印</h2>
<label for="text1">请输入水印内容</label><input type="text" name="text" id="text1" value="测试">
<input type="file" id="img1" accept="image/*">
<div id="container1"></div>

<hr>

<h2>添加文字水印</h2>
<label for="text2">请输入水印内容</label><input type="text" name="text" id="text2" value="测试">
<input type="file" id="img2" accept="image/*">
<div id="container2"></div>

<hr>

<h2>添加二维码</h2>
<label for="text3">请输入水印内容</label><input type="text" name="text" id="text3" value="测试">
<input type="file" id="img3" accept="image/*">
<div id="container3"></div>

<script>
    // 同时添加文字和二维码水印
    const fileInput1 = document.querySelector('#img1'),
        container1 = document.querySelector('#container1')

    fileInput1.onchange = async () => {
        let file = fileInput1.files[0]
        const blob = await Watermark.attachAll(file, {
            textContent: document.querySelector('#text1').value
        })
        const result = await Watermark.blobToImg(blob)
        container1.innerHTML = ''
        container1.appendChild(result)
    }

    // 添加文字水印
    const fileInput2 = document.querySelector('#img2'),
        container2 = document.querySelector('#container2')

    fileInput2.onchange = async () => {
        let file = fileInput2.files[0]
        const blob = await Watermark.attachText(file, {
            textContent: document.querySelector('#text2').value
        })
        const result = await Watermark.blobToImg(blob)
        container2.innerHTML = ''
        container2.appendChild(result)
    }

    // 添加二维码
    const fileInput3 = document.querySelector('#img3'),
        container3 = document.querySelector('#container3')

    fileInput3.onchange = async () => {
        let file = fileInput3.files[0]
        const blob = await Watermark.attachQRCode(file, {
            qrcodeContent: document.querySelector('#text3').value
        })
        const result = await Watermark.blobToImg(blob)
        container3.innerHTML = ''
        container3.appendChild(result)
    }
</script>
</body>
</html>